<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog system-user-dialog"
    :append-to-body="true"
    :title="dataList.TagEdit"
    align="center"
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
    :before-close="closeDialog"
  >
    <el-form
      ref="formData"
      label-width="100px"
      :model="formData"
      :rules="rules"
      status-icon
    >
      <el-form-item :label="dataList.TagName" prop="name">
        <el-input v-model="formData.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="dataList.TagEName" prop="eName">
        <el-input v-model="formData.eName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label">
          <span style="color: red">*</span>{{ dataList.DeviceImg }}</span
        >
        <BaseUpload
          key="BaseUpload"
          ref="BaseUpload"
          v-model="imgAllUrl"
          :file-path.sync="formData.imgUrl"
          business-type="100"
          :file-size="1024"
          :style-c-s-s="styleCSS"
        />
      </el-form-item>

      <el-form-item :label="dataList.TagType" prop="typeId">
        <dic-drop-down-list
          v-model="formData.typeId"
          dict-code="tag"
        ></dic-drop-down-list>
      </el-form-item>

      <el-form-item prop="statusId">
        <span slot="label">
          <span style="color: red">*</span>{{ dataList.Status }}</span
        >
        <el-select
          v-model="formData.statusId"
          clearable
          :placeholder="dataList.Placeholder"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="onSubmit()">{{ btn.Save }}</el-button>
      <el-button @click="closeDialog">{{ btn.Cancel }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import DicDropDownList from "../../components/DicDropDownList.vue";
import { get, update } from "../../api/DeviceTag";
import { statusList } from "../../utils/const";
import { mapGetters } from "vuex";
export default {
  name: "DeviceTagEditDialog",
  components: {
    DicDropDownList,
  },

  props: {
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    editId: {
      type: Number, // 布尔
      default: 0, // 必填
    },
  },
  data() {
    return {
      styleCSS: "text-align:left",
      statusList: statusList,
      imgAllUrl: "",
      formData: {
        name: "",
        eName: "",
        typeId: "",
        typeName: "",
        imgUrl: "",
        statusId: 1,
        statusName: "",
      },
      formRules: {},
      loading: true,
      rules: {
        name: [
          {
            required: true,
            message: this.$t("ModuleDevice.Message.InputTagName"),
            trigger: "blur",
          },
        ],
        typeId: [
          {
            required: true,
            message: this.$t("ModuleDevice.Message.SelectTagType"),
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },

  created() {
    this.loading = false;
  },
  mounted() {
    this.$nextTick(() => {
      this.initData();
    });
  },
  methods: {
    initData() {
      get({ id: this.editId })
        .then((res) => {
          this.formData.id = res.data.id;
          this.formData.name = res.data.name;
          this.formData.eName = res.data.eName;
          this.formData.typeId = res.data.typeId.toString();
          this.formData.typeName = res.data.typeName;
          // this.imgAllUrl = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${res.data.imgUrl}`;
          this.imgAllUrl = `${res.data.imgUrl}`;
          this.formData.imgUrl = res.data.imgUrl;
          this.formData.statusId = res.data.statusId;
          this.formData.statusName = res.data.statusName;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    onSubmit() {
      if (!this.formData.imgUrl) {
        this.$message.warning(this.$t("ModuleDevice.Message.UploadImg"));
        return false;
      }
      this.statusList.map((item) => {
        if (item.value === this.formData.statusId) {
          this.formData.statusName = item.name;
        }
      });

      this.$refs.formData.validate((valid) => {
        if (valid) {
          update(this.formData).then((res) => {
            this.closeDialog();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    closeDialog() {
      this.$emit("update:dialogFormVisible", false);
      this.$emit("getList");
    },
  },
};
</script>
<style scoped></style>
